<template>
  <div>
    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%">

      <el-table-column
          fixed="left"
          prop="date"
          label="序号"
          align="center">
        <template slot-scope="scope">
          {{(pageNum-1)*pageSize+scope.$index+1}}
        </template>
      </el-table-column>


      <el-table-column
          sortable
          fixed
          align="center"
          prop="school.schoolId"
          label="学院id">
      </el-table-column>

      <el-table-column
          prop="school.schoolName"
          label="学院名称">
        <template slot-scope="scope">
          <span v-if="!showEdit[scope.$index]">{{scope.row.school.schoolName}}</span>
          <el-input type="text" v-model="scope.row.school.schoolName" v-else placeholder="请输入学院名称"></el-input>
        </template>
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="150px"
          align="center">
        <template slot-scope="scope">
          <el-button v-if="!showEdit[scope.$index]" @click="showUpdate(scope.$index,scope.row)"
                     type="text" size="small">
            <!--                        <i class="el-icon-edit"></i>-->
            修改
          </el-button>
          <el-button v-if="showEdit[scope.$index]" @click="submitUpdate(scope.$index,scope.row)"
                     type="primary" round size="small">
            确认
          </el-button>
          <el-button v-if="showEdit[scope.$index]" @click="cancelUpdate(scope.$index)"
                     type="primary" round size="small">
            取消
          </el-button>
<!--          <el-button v-if="!showEdit[scope.$index]" @click="showStudentList(scope.row.course.courseId)"-->
<!--                     type="text" size="small">学生名单-->
<!--          </el-button>-->
          <el-button v-if="!showEdit[scope.$index]" @click="deleteCourse(scope.row.school.schoolId)"
                     type="text" size="small">删除
          </el-button>
          <br>
        </template>








      </el-table-column>

    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>

</template>

<script>
export default {
  name: "school-manager",
  data() {
    return {
      tableData: [],
      pageNum:1,
      pageSize:5,
      total:100,
      showEdit: [],

    }
  },
  methods:{
    getList(){
      this.$axios.get("/school/getAll?pageNum=" + this.pageNum + '&pageSize=' + this.pageSize,
          {
            headers: {
              "Authorization": this.$store.getters.getToken
            }
          }
      ).then(response => {
        // const list = response.data.data;
        this.tableData = response.data.data.list;
        this.total = response.data.data.total
      })
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.pageNum = val;
      this.getList();
    },
    showUpdate(index) {
      this.showEdit[index] = true;
      this.$set(this.showEdit, index, true); //这里要用$set方法，否则页面状态不更新
    },
    //取消修改
    cancelUpdate(index) {
      this.$confirm("取消修改？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.$set(this.showEdit, index, false);
            this.getList();
            this.getTermList();
            this.getTeacherList();
          })
          .catch(() => {
          });
    },
    submitUpdate(index, row) {
      this.$confirm("确认修改？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.$axios.put("/school/update", row.school,
                {
                  headers: {
                    "Authorization": this.$store.getters.getToken
                  }
                }).then(res => {
              this.$message({
                message: res.data.message,
                type: "success"
              })
              this.showEdit[index] = false;
              this.$set(this.showEdit, index, false);
            })
          })
          .catch(() => {
          });
    },
    deleteCourse(val) {
      this.$confirm('删除不可以恢复,确认要删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const _this = this;
        this.$axios.delete("/school/delete?schoolId=" + val,
            {
              headers: {
                "Authorization": _this.$store.getters.getToken
              }
            }
        ).then(response => {
          var message = response.data.message;
          this.$message({
            message: message,
            type: "success"
          });
          this.getList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>

</style>